import React from 'react';
import {inject, observer} from 'mobx-react';
import { Icon, TabBar, Tools,Button, } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import { BrowserHrm,DocumentTitle} from 'weaver-mobile-page';
import BlogBrowserHrmStore from "../../stores/blogMain/BlogBrowserHrmStore";
import RouteModal from './Route';
const blogBrowserHrmStore = new BlogBrowserHrmStore();
const getLabel = Tools.getLabel;

const store=[
  'userCenterStore',
  'blogHomeStore',
]

@withRouter
@inject(...store)
@observer
export default class Main extends React.Component {
  constructor(props) {
    super(props);
      this.state={
         display:"none",
         templateType:"0",
         bdShare:"0"
      }
  }

  componentDidMount() {
    const { userCenterStore:{ initMenuCountData,getFilterids } } = this.props;

    initMenuCountData((res) => {
        this.setState({templateType:res.templateType,bdShare:res.bdShare});
    });
    getFilterids();

    // this.props.blogHomeStore.setState({hidden: false})
  }


  setDisplay = () =>{
      const display = this.state.display;
      if(display=='none'){
          this.setState({display:"block"});
      }else{
          this.setState({display:"none"});
      }
  }

  // 根据路由获得当前的key
  getKey = (path) => {
    let key = '0';
    if (path.indexOf('/myBlog') > -1) { key = '0' };
    if (path.indexOf('/blogMain') > -1) { key = '1' }
    if (path.indexOf('/myBlog/writeBlog') > -1) { key= '2' }
    if (path.indexOf('/blogReport') > -1) { key = '3' }
    if (path.indexOf('/userCenter') > -1) { key = '4' }
    return key;
  }

   getFilterid = () => {
     const {getFilterids} = this.props.userCenterStore;
     getFilterids();
   }

   batchAttention = (ids) => {
      const {batchAttention} = this.props.userCenterStore;
      batchAttention(ids);
   }


  render() {
    const { location: { pathname }, userCenterStore:{ menuCountData,gzbroswercondition,userInfo }, blogHomeStore: { hidden } } = this.props;
    const activeKey = this.getKey(pathname);
   const {  browserHrm, browserHrm1, setState, browserHrmValue, browserHrmValue1 } =blogBrowserHrmStore;
      const { history } = this.props;
      let botttom ={"bottom":"50px"}
      if(hidden){
          botttom = {"bottom":"0px"}
      }

      const datas = [
          { match: /^\/blogMain/i, title: () => Tools.getLabel(27128, '微博主页') },
          { match: /^\/myBlog\/^(?!writeBlog)/i, title: () => Tools.getLabel(26468, '我的微博') },
          { match: /^\/myBlog\/writeBlog\/^(?!discussShareTool)/i, title: () => Tools.getLabel(510107,'写微博') },
          { match: /^\/blogReport/i, title: () => Tools.getLabel(26470, '微博报表') },
          { match: /^\/userCenter/i, title: () => Tools.getLabel(390689, '个人中心') },
          { match: /^\/discussShareTool/i, title: () => Tools.getLabel(6104,'公开范围') }
      ];


      const renderWrite = () =>  {



          return userInfo.allowRequest=='1'? <div style={{"display":this.state.display,width: 143, height: 80, position: "absolute", "z-index": "1", "margin-left": "50%", "left": "-72px", "bottom": 55,"background-color": "rgba(0, 0, 0, 0.71)","border-radius": 5}}>
                  <div onClick={() => {this.setState({display:"none"});this.getFilterid(); history.push(browserHrm1.path)}} style={{width: 100,height: 40,"font-size": 13,"color": "white","text-align": "center","line-height": 53}} >
                      <div style={{width: 30,position: "absolute","left":10,"top":-3}}>
                          <Icon type="tianjia" size="xs" style={{"color":"white"}} />
                      </div>
                      <div style={{width: 60,"position": "absolute","margin-left": 42,"top": -5}} >
                          <BrowserHrm
                              style={{"background-color": "rgba(234, 234, 234, 0)","border": 0}}
                              store={browserHrm1}
                              hasAdvanceSerach
                              isSingle={false}
                              type={17}
                              onConfirm={(value)=>{
                                  this.batchAttention(value);
                              }}
                              valueArray={browserHrmValue1}
                              dataParams={{
                                  filterids:gzbroswercondition
                              }}
                              completeParams={{
                                  filterids:gzbroswercondition
                              }}
                          >
                              <Button  style={{"background-color": "rgba(234, 234, 234, 0)","border": 0,"height":40,"color":"white"}}>{getLabel(26939,'添加关注')}</Button>
                          </BrowserHrm>
                      </div>
                  </div>
                  <div style={{"position": "absolute", "margin-top":" -1px","width":"100px","margin-left": "50%","left": "-50px","height": 1,"background-color": "rgba(185, 185, 185, 0.78)"}}></div>
                  <div onClick={() =>{this.setState({display:"none"}); this.props.history.push({pathname:'/myBlog/writeBlog',state:{templateType:this.state.templateType,bdShare:this.state.bdShare}})} } style={{width: 100,height: 40,"font-size": 13,"color": "white","text-align": "center","line-height": 53}}>
                      <div style={{width: 30,position: "absolute","top":34,"left":10}}>
                          <Icon type="edit" size="xs" style={{"color":"white"}} />
                      </div>
                      <div style={{width: 70,"position": "absolute","margin-left": 40,"top": 30}} >
                          {getLabel(510107,'写微博')}
                      </div>
                  </div>
                  <div style={{"position": "absolute", "margin-left": "50%", "z-index": 9999, "bottom": -12, "border-width": 6, "border-style": "solid", "border-color": "#4a4a4a #f1f1f100 transparent transparent", "left": -5}}></div>
              </div>:
              <div style={{"display":this.state.display,width: 143, height: 43, position: "absolute", "z-index": "1", "margin-left": "50%", "left": "-72px", "bottom": 55,"background-color": "rgba(0, 0, 0, 0.71)","border-radius": 5}}>
                  <div onClick={() =>{this.setState({display:"none"}); this.props.history.push({pathname:'/myBlog/writeBlog',state:{templateType:this.state.templateType,bdShare:this.state.bdShare}})} } style={{width: 100,height: 40,"font-size": 13,"color": "white","text-align": "center","line-height": 53}}>
                      <div style={{width: 30,position: "absolute","left":10,"top":-1}}>
                          <Icon type="edit" size="xs" style={{"color":"white"}} />
                      </div>
                      <div style={{width: 80,"position": "absolute","margin-left": 40,"top":-5}}>
                          {getLabel(510107,'写微博')}
                      </div>
                  </div>
                  <div style={{"position": "absolute", "margin-left": "50%", "z-index": 9999, "bottom": -12, "border-width": 6, "border-style": "solid", "border-color": "#4a4a4a #f1f1f100 transparent transparent", "left": -5}}></div>
              </div>

      }


      const renderAtt = () =>  {
          return userInfo.allowRequest=='1'? <div style={{"display":this.state.display,width: 143, height: 42, position: "absolute", "z-index": "1", "margin-left": "50%", "left": "-72px", "bottom": 55,"background-color": "rgba(0, 0, 0, 0.71)","border-radius": 5}}>
                  <div onClick={() => {this.setState({display:"none"});this.getFilterid(); history.push(browserHrm1.path)}} style={{width: 100,height: 40,"font-size": 13,"color": "white","text-align": "center","line-height": 53}} >
                      <div style={{width: 30,position: "absolute","left":10,"top":-3}}>
                          <Icon type="tianjia" size="xs" style={{"color":"white"}} />
                      </div>
                      <div style={{width: 60,"position": "absolute","margin-left": 42,"top": -5}} >
                          <BrowserHrm
                              style={{"background-color": "rgba(234, 234, 234, 0)","border": 0}}
                              store={browserHrm1}
                              hasAdvanceSerach
                              isSingle={false}
                              type={17}
                              onConfirm={(value)=>{
                                  this.batchAttention(value);
                              }}
                              valueArray={browserHrmValue1}
                              dataParams={{
                                  filterids:gzbroswercondition
                              }}
                              completeParams={{
                                  filterids:gzbroswercondition
                              }}
                          >
                              <Button  style={{"background-color": "rgba(234, 234, 234, 0)","border": 0,"height":40,"color":"white"}}>{getLabel(26939,'添加关注')}</Button>
                          </BrowserHrm>
                      </div>
                  </div>

                  <div style={{"position": "absolute", "margin-left": "50%", "z-index": 9999, "bottom": -12, "border-width": 6, "border-style": "solid", "border-color": "#4a4a4a #f1f1f100 transparent transparent", "left": -5}}></div>
              </div>:""

      }


      return (
      <div className="blog-navBar">
          <DocumentTitle data={datas} defaultTitle="" />
          { renderWrite()}
        <TabBar
          barTintColor='white'
          hidden={hidden}
          tabBarPosition='bottom'
          prerenderingSiblingsNumber={0}
        >
          <TabBar.Item
            title={<span className={activeKey === '1' ? 'blog-tab-tintColor' : ''}>{getLabel(27128, '微博主页')}</span>}
            key='1'
            icon={<Icon type='blog-homepage-o'/>}
            selectedIcon={<Icon type='blog-homepage'/>}
            selected={activeKey === '1'} //是否选中
            badge={menuCountData && menuCountData.updateCount}

            onPress={() =>  {this.setState({display:"none"}); this.props.history.push({ pathname: '/blogMain', isNoParams: "1" })}}
          />
          <TabBar.Item
            title={<span className={activeKey === '0' ? 'blog-tab-tintColor' : ''}>{getLabel(26468, '我的微博')}</span>}
            key='0'
            icon={<Icon type='blog-blog-o'/>}
            selectedIcon={<Icon type='blog-bolg'/>}
            selected={activeKey === '0'} //是否选中
            onPress={() => { this.setState({display:"none"});this.props.history.push('/myBlog')}}
          />
          <TabBar.Item
            title=""
            key='2'
            icon={<Icon type='blog-gengduo' size='lg'/>}
            selectedIcon={<Icon type='blog-gengduo' size='lg'/>}
            selected={activeKey === '2'} //是否选中
            onPress={() => this.setDisplay()}
          />
          <TabBar.Item
            title={<span className={activeKey === '3' ? 'blog-tab-tintColor' : ''}>{getLabel(26470, '微博报表')}</span>}
            key='3'
            icon={<Icon type='blog-report-form'/>}
            selectedIcon={<Icon type='blog-report-form-hot'/>}
            selected={activeKey === '3'} //是否选中
            onPress={() => {this.setState({display:"none"}); this.props.history.push('/blogReport')}}
          />
          <TabBar.Item
            title={<span className={activeKey === '4' ? 'blog-tab-tintColor' : ''}>{getLabel(390689, '个人中心')}</span>}
            key='4'
            icon={<Icon type='blog-personal-o'/>}
            selectedIcon={<Icon type='blog-personal'/>}
            selected={activeKey === '4'} //是否选中
            badge={menuCountData && menuCountData.remindCount}
            onPress={() => {this.setState({display:"none"});this.props.history.push('/userCenter')}}
          />
        </TabBar>

        <div className='blog-container' style={botttom}  onClick={() => this.setState({display:"none"})}>
          {this.props.children}
        </div>
        <RouteModal />
      </div>
    )
  }
}
